import { TreeFZProps } from "../../type/common";
import { TreeFZBox, TreeFZItemBox, TreeTitleBox } from "./style";
import { FC, useEffect, useState } from "react";

/**
 * 
 */
interface TreeFzPropsNeibu extends TreeFZProps {
    show?: boolean;
}





const TreeFZ: FC<{
    treeData: TreeFZProps[];
    selectIdArr: string[]; // 选中的id数组
    setSelectIdArr: React.Dispatch<React.SetStateAction<string[]>>; // 设置选中的id数组
}> = ({
    treeData,
    selectIdArr,
    setSelectIdArr
}) => {
        const [treeDataNeibu, setTreeDataNeibu] = useState<TreeFzPropsNeibu[]>(treeData);

        useEffect(() => {
            setTreeDataNeibu([...treeData])
        }, [treeData])

        // 点击展开收缩
        const handleClickOpenClose = (key: string) => {
            console.log(key)
            const newTreeData = [...treeDataNeibu]
            const loop = (data: TreeFzPropsNeibu[]) => {
                data.forEach((item) => {
                    if (item.key === key) {
                        item.show = !item.show;
                        setTreeDataNeibu(newTreeData)
                    } else {
                        if (item.children) {
                            loop(item.children)
                        }
                    }
                })
            }
            loop(newTreeData)
        }
        // 选中
        const handleSelect = (value: TreeFzPropsNeibu) => {
            let arr = [...selectIdArr];
            if (arr.includes(value.key)) {
                arr = arr.filter((item) => item !== value.key)
            } else {
                arr.push(value.key)
            }
            setSelectIdArr([...arr])
        }


        const handleXunhuanHTML = (listData: TreeFzPropsNeibu[], level = 0) => {
            level++;
            return <>
                {
                    listData.map((item) => <TreeFZItemBox key={item.key} >
                        <TreeTitleBox

                            $youyi={level - 1}
                        >
                            <input readOnly onClick={() => handleSelect(item)} type="checkbox" checked={selectIdArr.includes(item.key)} />
                            {(item.children && item.children?.length > 0) && <span onClick={(e) => {
                                handleClickOpenClose(item.key)
                            }} className={item.show ? 'iconfont jiedian icon_xuanzhuan' : 'iconfont jiedian'}>&#xe626;</span>}
                            <div onClick={() => handleSelect(item)}>  {item.title}</div>

                            <div className="terr_type_box">{item.menuType === 'C' ? '菜单' : '按钮'}</div>
                        </TreeTitleBox>
                        <div className="cesi">
                            {
                                item.show && item.children && item.children.length > 0 && handleXunhuanHTML(item.children, level)
                            }
                        </div>

                    </TreeFZItemBox>)
                }
            </>
        }
        return <TreeFZBox>
            {
                handleXunhuanHTML(treeDataNeibu)
            }

        </TreeFZBox>
    }

export default TreeFZ;